<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞</title>
    <!--微调一下-->
    <style>
        .item{
            border-bottom: #FF3366 2px dashed;
            height: 200px;
            width: 1500px;

        }
        .span1{
            margin-top: 5px;
            margin-left: 300px;
            display: block;
            font-size: 40px;
            text-align: center;
            padding-top: 40px;
            width: 200px;
            height: 150px;
        }

    </style>
</head>
<body>
    <div class="item">
        <span class="span1" >赞</span>
    </div>
    <br>
    <div class="item">
        <span class="span1" >赞</span>
    </div>
    <br>
    <div class="item">
        <span class="span1" >赞</span>
    </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //对所有点赞对象添加同样地方法
    $(".span1").click(function () {

        //取得当前点击的元素对象
        let box = $(this);
        //创建点赞数字
        box.append("<span class='tag'>+1</span>");
        let tag = $(".tag");


        //定义“+1”效果属性
            //动画开始和结束大小
        let startSize = "40px";
        let endSize = "80px";
        let startSizeNum = 40;

        let endSizeNum = 80;
        let left = (box.offset().left+box.width()/2)-10;
        let top = (box.offset().top+box.height())-100;

        $(tag).css({
            "color":"#ff6600",
            "position":"absolute",
            "z-index":999,
            "left":left+"px",
            "top":top+"px",
            "font-size":startSize,
            "line-height":endSize,
            "font-weight":"weight"
        });

        tag.animate({
            "font-size":endSize,
            "opacity":"0",
            "top":(top-endSizeNum)+"px"
        },60,function () {
            console.log("测试成功");
            tag.remove();
        });

    })

</script>
</html>

<!--
HTML页面效果<div class=“item”><span>赞</span>
实现点赞效果：利用计时器按时调用指定函数实现点赞效果，
     var tag=document.createElement(‘span’); $(tag).text('+1'); $(tag).css('color','#ff6600');
$(tag).css('position','absolute');setInterval(function(),35)
当tag透明度小于0时，opacity<0，移除计数器并移除tag
-->